<template>
	<view>
		<view class="cell-item" :class="{'warlling': (player.item_lev < redLev || (player.cloud && player.cloud.role != player.role)), 'un-online': (player.online != '1')}" :style="{backgroundColor: (player.player_type == 0 && showRed) ? 'red' : player.color}">
			<image v-if="player.role != 'none'" class="role" :src="'/static/role/' + player.role + '_icon.png'" mode=""></image>
			<!-- <image class="role-ng" :src="'/static/role/' + player.role + '_ng.png'" mode=""></image> -->
			<image v-if="player.cloud && player.cloud.role != player.role" class="role-ng" :src="'/static/role/' + player.cloud.role + '_ng.png'" mode=""></image>
			<view class="name">
				<view class="name-title" :style="{color: (player.online == '1' ? '#ffffff' : player.color)}">
					{{player.name}}
				</view>
				<view v-if="player.online == '1'" class="item-lev" :class="{'item-lev-r': (player.item_lev < redLev)}">
					{{player.item_lev == 0 ? '...' : player.item_lev}}
				</view>
				<view v-else class="item-lev" style="color: #e6e6e6;">
					（离线）
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"cell-item",
		props: {
			player: {
				type: Object,
				default: {}
			},
			redLev: {
				type: Number,
				default: 0
			},
			showRed: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style scoped>
	
	.cell-item {
		width: 80px;
		height: 45px;
		position: relative;
		/* border-radius: 2px; */
		
	}
	
	.cell-item:hover {
		cursor: pointer;
	}
	
	.un-online {
		background-color: #636363 !important; 
	}
	
	.role {
		position: absolute;
		left: 0;
		top: 0;
		width: 12px;
		height: 12px;
		z-index: 2;
	}
	
	.role-ng {
		position: absolute;
		left: 12px;
		top: 0;
		width: 12px;
		height: 12px;
	}
	
	.name {
		position: absolute;
		left: 10px;
		top: 0;
		width: calc(100% - 20px);
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 5;
		/* font-weight: bold; */
		color: white;
		text-shadow: 1px 1px 1px black;
		font-size: 12px;
		z-index: 1;
	}
	
	.item-lev {
		margin-top: -8px;
		color: #5bff53;
	}
	
	.item-lev-r {
		color: red
	}
	
	.warlling {
		box-shadow: 0px 0px 1px red inset;
		animation: itemLev 1s linear infinite;
		font-weight: bold;
		border: 2px red solid;
		box-sizing: border-box;
	}
	
	@keyframes itemLev {
		0% {box-shadow: 0px 0px 1px red inset;}
		50% {box-shadow: 0px 0px 15px red inset;}
		100% {box-shadow: 0px 0px 1px red inset;}
	}
	
	.name-title {
		width: 100%;
		white-space: nowrap;          /* 防止文字换行 */
		overflow: hidden;             /* 隐藏超出部分 */
		text-overflow: ellipsis;      /* 显示省略号 */
		text-align: center;
	}

</style>